<template>
	<view class="record column">
		<view class="flex-1 hb column hidden bgf">
			<scroll-view
				class="hb ptb20"
				:scroll-y="true"
				:refresher-enabled="scrollViewTool.isEnabled"
				:refresher-triggered="scrollViewTool.triggered"
				refresher-background="rgba(0,0,0,0)"
				@refresherrefresh="pullDownRefresh"
				@refresherrestore="scrollViewTool.triggered = false"
				:upper-threshold="100"
				:lower-threshold="100"
				@refresherabort="triggered = false"
				@scrolltolower="reachBottom"
			>
				<template v-if="listData.length > 0">
					<view
						class="list_item justify-between align-end"
						v-for="(item, index) in listData"
						:key="item.id"
						:style="{ animation: `zoom ${listDataDelay[index]}` }"
					>
						<view class="justify-start">
							<u-avatar :src="item.head_img"></u-avatar>
							<view class="ml10 bold">
								<view>{{ item.nickname }}</view>
								<view>{{ item.phone }}</view>
							</view>
						</view>
						<view class="align-center justify-between">
							<text class="color7">{{ item.invite_date }}</text>
						</view>
					</view>
					<u-loadmore :status="loadStatus" />
				</template>
				<view class="flex-1 hb centerV" v-else>
					<fr-empty-record />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { useLoadPageList } from '@/hooks/useLoadPageList/useLoadPageList.js';
import { inviteRecord } from '@/api/user';

const { listData, listDataDelay, loadStatus, scrollViewTool, reachBottom, pullDownRefresh, getListData, reSetList } =
	useLoadPageList(inviteRecord);

onLoad(() => {
	reSetList();
});
</script>

<style lang="scss" scoped>
.record {
	height: calc(100% - 20rpx);
	padding: 20rpx 0 0;

	.list_item {
		background: #fff;
		padding: 35rpx 33rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #e2e2e2;
	}
}
</style>
